
<style>
    :host {
        position: relative;
        display: inline-block;
        text-align: center;
        color: #E0E0E0;
        cursor: pointer;
        text-shadow: 0.13rem 0.13rem 0 #383838;
        padding: 0.5em;
        --mc-ui-track-border-width: calc(3px * var(--mc-ui-button-img-border-top));
        border-width: var(--mc-ui-track-border-width);
    }
    :host(:not([disabled]):hover) {
        color: #FFFFA0;
        text-shadow: 0.13rem 0.13rem 0 #3F3F28;
    }
    :host([disabled]) {
        opacity: .75;
        cursor: not-allowed;
    }
    label {
        user-select: none;
        pointer-events: none;
        position: relative;
    }
    input {
        position: absolute;
        appearance: none;
        margin: 0;
        background: transparent;
        left: calc(-1 * var(--mc-ui-track-border-width));
        top: calc(-1 * var(--mc-ui-track-border-width));
        width: calc(100% + 2 * var(--mc-ui-track-border-width));
        height: calc(100% + 2 * var(--mc-ui-track-border-width));
        cursor: pointer;
    }
    input:disabled {
        cursor: not-allowed;
    }
    input::-webkit-slider-runnable-track {
        height: 100%;
    }
    input::-webkit-slider-thumb {
        appearance: none;
        cursor: ew-resize;
        background: transparent;
        box-sizing: content-box;
        --top: calc(3px * var(--mc-ui-slider-thumb-img-border-top));
        --bottom: calc(3px * var(--mc-ui-slider-thumb-img-border-bottom));
        border-width:
            var(--top)
            calc(3px * var(--mc-ui-slider-thumb-img-border-left))
            var(--bottom)
            calc(3px * var(--mc-ui-slider-thumb-img-border-right));
        width: 0;
        height: calc(100% - var(--top) - var(--bottom));
    }
    input:disabled::-webkit-slider-thumb { cursor: not-allowed; }
    input::-moz-range-thumb {
        cursor: ew-resize;
        background: transparent;
        box-sizing: content-box;
        --top: calc(3px * var(--mc-ui-slider-thumb-img-border-top));
        --bottom: calc(3px * var(--mc-ui-slider-thumb-img-border-bottom));
        border-width:
            var(--top)
            calc(3px * var(--mc-ui-slider-thumb-img-border-left))
            var(--bottom)
            calc(3px * var(--mc-ui-slider-thumb-img-border-right));
        width: 0;
        height: calc(100% - var(--top) - var(--bottom));
    }
    input:disabled::-moz-range-thumb { cursor: not-allowed; }
</style>
<!-- 滑块是按钮的头4像素尾4像素拼接 背景是按下的按钮 -->
<input type="range" id="thumb" />
<label>
    <slot><slot name="label"></slot></slot>
    <slot name="echo">
        <span id="specified-echo"></span>
        <span id="default-echo">
            <slot name="prefix"></slot><span id="progress"></span><slot name="unit">%</slot>
        </span>
    </slot>
</label>
